<template>
	<div>
		<div class="consultation">
			<ul class="list-top">
				<li v-for="item in listArr">
					<div class="list-left"> 
						<div class="inner-box clearfix">
							<!--<span>无头像</span>-->
							<img v-if="!item.face" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537261917&di=bbc0c768ba2e9ab1b45a75bd42a422ef&src=http://tx.haiqq.com/uploads/allimg/170810/0430103R0-3.jpg" alt="" />
							<img :src="item.face" alt="" v-if="item.face" />
							<span class="createTime">{{item.createTime | moment}}</span>
						</div>
					</div>
					<div class="odiv">
						姓名: {{ item.name }}
					</div>
					<div class="list-center">
						{{ item.content }}
					</div>
					<div class="list-right" @click="toReply(item)">
						立即回复
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {formatDate} from '@/filter/date.js' ;
	export default {
		data(){
			return {
				listArr: []
			}
		},
		methods: {
			//  获取数据
			getData(){
				this.$http.get('/topic/list')
					.then(({data})=>{
						this.listArr = data.data.list.map(e=>{
							e.createTime = Math.floor(e.createTime/1000);
							return e
						})
//						console.log(this.listArr)
					})
					.catch((err)=>{
						console.log(err)
					})
			},
			toReply(item){
				console.log(item)
				this.$router.push({
					path: '/consultation/editReply/' + item.id,
					query: item
				})
			}
		},
		// 初始化数据
		created(){
			this.getData()
		}
	}
</script>
<style lang="less">
	.list-top li {
		border: 1px solid #333;
		border-radius: 10px;
		margin-bottom: 20px;
		height: 130px;
		padding: 10px 20px;
		position: relative;
		overflow: hidden;
		
		.list-left {
			float: left;
			
			.inner-box {
				position: relative;
				height: 110px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.createTime {
					position: absolute;
					bottom: -46px;
					left: 0;
				}
				img{
					display: block;
					width: 60px !important;
					height: 80px;
					margin-bottom: 10px;
				}
			}
		}
		.odiv{
			float: left;
			/*height: 110px;
			line-height: 110px;
			margin-left: 20px;*/
			position: absolute;
			left: 100px;
			top: 46%;
		}
		.list-left,.list-center,.list-right {
			width: 33%;
			float: left;
			text-align: center;
			height: 110px;
			line-height: 110px;
		}
		
		.list-center,.list-right {
			text-align: right;
			font-size: 24px;
			color: #097E7E;
		}
		.list-center {
			color: #333;
			text-align: center;
		}
		
	}
</style>